<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>特约服务</el-breadcrumb-item>
                    <el-breadcrumb-item>我的服务</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <template>
                        <el-select v-model="formInline.serviceType" placeholder="服务类型">
                            <el-option
                                    v-for="item in options1"
                                    :key="item.value1"
                                    :label="item.label1"
                                    :value="item.value1">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="getServiceListByType()">查询</el-button>

                </el-form-item>
            </el-form>
        </div>
        <div >
            <el-card>
                <el-tabs style=" margin-top: 0px;margin-bottom: 0px;" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部服务" name="first">
                    <div>
                        <div>
                            <el-table
                                    :data="tableData.slice((pageForm.number-1)*pageForm.pagesize,pageForm.number*pageForm.pagesize)"
                                    style="width: 100%">
                                <el-table-column
                                        prop="sid"
                                        label="服务表编号"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="serviceType"
                                        label="服务类型"
                                        width="150"
                                        align="center">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.serviceType==0">家电维修</span>
                                        <span v-if="scope.row.serviceType==1">代送快递</span>
                                        <span v-if="scope.row.serviceType==2">房屋装修</span>
                                        <span v-if="scope.row.serviceType==3">家居清理 </span>
                                        <span v-if="scope.row.serviceType==4">提醒服务 </span>
                                        <span v-if="scope.row.serviceType==5">水电维修 </span>
                                        <span v-if="scope.row.serviceType==6">其他</span>
                                    </template>
                                </el-table-column>

                                <el-table-column
                                        prop="requireDetail"
                                        label="请求详情"
                                        width="400"
                                        align="center">
                                </el-table-column>

                                <el-table-column
                                        prop="stime"
                                        label="预订时间"
                                        width="150"
                                        align="center">

                                </el-table-column>

                                <el-table-column
                                        label="处理结果"
                                        width="200"
                                        align="center">

                                    <template slot-scope="scope">
                                        <span v-if="scope.row.sstatus==0">未处理</span>
                                        <span v-if="scope.row.sstatus==2||scope.row.sstatus==1">
                                        <el-button type="text" @click="detail(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                    </template>


                                </el-table-column>
                                <el-table-column
                                        v-cloak
                                        prop="mstatus"
                                        label="操作"
                                        width="150"
                                        align="center">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.sstatus==0">待处理</span>
                                        <span v-if="scope.row.sstatus==1">
                                            <el-button type="text" @click="evaluate(scope.$index,scope.row)">评价</el-button>
                                        </span>
                                        <span v-if="scope.row.sstatus==2">已评价
                                        <el-button type="text" @click="deleteService(scope.row)">删除</el-button>
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-pagination
                                    style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="pageForm.pagenum"
                                    :page-sizes="[2, 5, 10, 15]"
                                    :page-size="pageForm.pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </div>

                    </div>
                </el-tab-pane>
                <el-tab-pane label="已完成" name="second">
                    <div>
                        <div>
                            <el-table
                                    :data="tableData1.slice((pageForm1.number-1)*pageForm1.pagesize,pageForm1.number*pageForm1.pagesize)"
                                    style="width: 100%">
                                <el-table-column
                                        prop="sid"
                                        label="服务表编号"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="serviceType"
                                        label="服务类型"
                                        width="150"
                                        align="center">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.serviceType==0">家电维修</span>
                                        <span v-if="scope.row.serviceType==1">代送快递</span>
                                        <span v-if="scope.row.serviceType==2">房屋装修</span>
                                        <span v-if="scope.row.serviceType==3">家居清理 </span>
                                        <span v-if="scope.row.serviceType==4">提醒服务 </span>
                                        <span v-if="scope.row.serviceType==5">水电维修 </span>
                                        <span v-if="scope.row.serviceType==6">其他</span>
                                    </template>
                                </el-table-column>

                                <el-table-column
                                        prop="requireDetail"
                                        label="请求详情"
                                        width="400"
                                        align="center">
                                </el-table-column>

                                <el-table-column
                                        prop="stime"
                                        label="预订时间"
                                        width="150"
                                        align="center">

                                </el-table-column>

                                <el-table-column
                                        label="处理结果"
                                        width="200"
                                        align="center">

                                    <template slot-scope="scope">
                                        <span v-if="scope.row.sstatus==0">未处理</span>
                                        <span v-if="scope.row.sstatus==2||scope.row.sstatus==1">
                                        <el-button type="text" @click="detail(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                    </template>


                                </el-table-column>
                                <el-table-column
                                        v-cloak
                                        prop="mstatus"
                                        label="操作"
                                        width="150"
                                        align="center">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.sstatus==0">待处理</span>
                                        <span v-if="scope.row.sstatus==1">
                                            <el-button type="text" @click="evaluate(scope.$index,scope.row)">评价</el-button>
                                        </span>
                                        <span v-if="scope.row.sstatus==2">已评价
                                        <el-button type="text" @click="deleteService(scope.row)">删除</el-button>
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-pagination
                                    style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                    @size-change="handleSizeChange1"
                                    @current-change="handleCurrentChange1"
                                    :current-page="pageForm1.pagenum"
                                    :page-sizes="[2, 5, 10, 15]"
                                    :page-size="pageForm1.pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total1">
                            </el-pagination>
                        </div>

                    </div>
                </el-tab-pane>

                <el-tab-pane label="未完成" name="third">
                    <div>
                        <div>
                            <el-table
                                    :data="tableData2.slice((pageForm2.number-1)*pageForm2.pagesize,pageForm2.number*pageForm2.pagesize)"
                                    style="width: 100%">
                                <el-table-column
                                        prop="sid"
                                        label="服务表编号"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="serviceType"
                                        label="服务类型"
                                        width="150"
                                        align="center">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.serviceType==0">家电维修</span>
                                        <span v-if="scope.row.serviceType==1">代送快递</span>
                                        <span v-if="scope.row.serviceType==2">房屋装修</span>
                                        <span v-if="scope.row.serviceType==3">家居清理 </span>
                                        <span v-if="scope.row.serviceType==4">提醒服务 </span>
                                        <span v-if="scope.row.serviceType==5">水电维修 </span>
                                        <span v-if="scope.row.serviceType==6">其他</span>
                                    </template>
                                </el-table-column>

                                <el-table-column
                                        prop="requireDetail"
                                        label="请求详情"
                                        width="400"
                                        align="center">
                                </el-table-column>

                                <el-table-column
                                        prop="stime"
                                        label="预订时间"
                                        width="150"
                                        align="center">

                                </el-table-column>

                                <el-table-column
                                        label="处理结果"
                                        width="200"
                                        align="center">

                                    <template slot-scope="scope">
                                        <span v-if="scope.row.sstatus==0">未处理</span>
                                        <span v-if="scope.row.sstatus==2||scope.row.sstatus==1">
                                        <el-button type="text" @click="detail(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                    </template>


                                </el-table-column>
                                <el-table-column
                                        v-cloak
                                        prop="mstatus"
                                        label="操作"
                                        width="150"
                                        align="center">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.sstatus==0">待处理</span>
                                        <span v-if="scope.row.sstatus==1">
                                            <el-button type="text" @click="evaluate(scope.$index,scope.row)">评价</el-button>
                                        </span>
                                        <span v-if="scope.row.sstatus==2">已评价
                                        <el-button type="text" @click="deleteService(scope.row)">删除</el-button>
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <el-pagination
                                    style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                    @size-change="handleSizeChange2"
                                    @current-change="handleCurrentChange2"
                                    :current-page="pageForm2.pagenum"
                                    :page-sizes="[2, 5, 10, 15]"
                                    :page-size="pageForm2.pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total2">
                            </el-pagination>
                        </div>

                    </div>
                </el-tab-pane>
                    <el-tab-pane label="已评价" name="four">
                        <div>
                            <div>
                                <el-table
                                        :data="tableData3.slice((pageForm3.number-1)*pageForm3.pagesize,pageForm3.number*pageForm3.pagesize)"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="sid"
                                            label="服务表编号"
                                            width="150"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="serviceType"
                                            label="服务类型"
                                            width="150"
                                            align="center">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.serviceType==0">家电维修</span>
                                            <span v-if="scope.row.serviceType==1">代送快递</span>
                                            <span v-if="scope.row.serviceType==2">房屋装修</span>
                                            <span v-if="scope.row.serviceType==3">家居清理 </span>
                                            <span v-if="scope.row.serviceType==4">提醒服务 </span>
                                            <span v-if="scope.row.serviceType==5">水电维修 </span>
                                            <span v-if="scope.row.serviceType==6">其他</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column
                                            prop="requireDetail"
                                            label="请求详情"
                                            width="400"
                                            align="center">
                                    </el-table-column>

                                    <el-table-column
                                            prop="stime"
                                            label="预订时间"
                                            width="150"
                                            align="center">

                                    </el-table-column>

                                    <el-table-column
                                            label="处理结果"
                                            width="200"
                                            align="center">

                                        <template slot-scope="scope">
                                            <span v-if="scope.row.sstatus==0">未处理</span>
                                            <span v-if="scope.row.sstatus==2||scope.row.sstatus==1">
                                        <el-button type="text" @click="detail(scope.$index,scope.row)">处理结果</el-button>
                                    </span>
                                        </template>


                                    </el-table-column>
                                    <el-table-column
                                            v-cloak
                                            prop="mstatus"
                                            label="操作"
                                            width="150"
                                            align="center">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.sstatus==0">待处理</span>
                                            <span v-if="scope.row.sstatus==1">
                                            <el-button type="text" @click="evaluate(scope.$index,scope.row)">评价</el-button>
                                        </span>
                                            <span v-if="scope.row.sstatus==2">已评价
                                        <el-button type="text" @click="deleteService(scope.row)">删除</el-button>
                                        </span>
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <el-pagination
                                        style="display: flex; justify-content: flex-end;margin-top: 10px;"
                                        @size-change="handleSizeChange3"
                                        @current-change="handleCurrentChange3"
                                        :current-page="pageForm3.pagenum"
                                        :page-sizes="[2, 5, 10, 15]"
                                        :page-size="pageForm3.pagesize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total3">
                                </el-pagination>
                            </div>

                        </div>
                    </el-tab-pane>
            </el-tabs>
            </el-card>
        </div>

        <el-dialog title="服务情况" v-model="dialogVisible":visible.sync="dialogVisible" v-if='dialogVisible' :before-close="closeDiglog" >
            <el-form :model="gridForm"  ref="gridForm" >

                <el-form-item label="服务人" :label-width="formLabelWidth">
                    <el-input v-model="gridForm.sname"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="服务人员电话" :label-width="formLabelWidth">
                    <el-input v-model="gridForm.sphone"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="服务详情" :label-width="formLabelWidth">
                    <el-input v-model="gridForm.sdetail"  autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="服务派遣" v-model="dialogFormVisible":visible.sync="dialogFormVisible" :before-close="closeDiglog" v-if='dialogFormVisible'>
            <el-form :model="form"  :rules="rules" ref="form" >
                <el-form-item label="服务表编号" :label-width="formLabelWidth"size="small">

                    <el-input v-model="form.sid" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="报修类型" :label-width="formLabelWidth"size="small">
                    <template slot-scope="scope">
                        <span v-if="scope.row.serviceType==0">家电维修</span>
                        <span v-if="scope.row.serviceType==1">代送快递</span>
                        <span v-if="scope.row.serviceType==2">房屋装修</span>
                        <span v-if="scope.row.serviceType==3">家居清理 </span>
                        <span v-if="scope.row.serviceType==4">提醒服务 </span>
                        <span v-if="scope.row.serviceType==5">水电维修 </span>
                        <span v-if="scope.row.serviceType==6">其他</span>
                    </template>
                </el-form-item>
                <el-form-item label="报修内容" :label-width="formLabelWidth" size="small">
                    <el-input v-model="form.requireDetail" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="报修时间" :label-width="formLabelWidth" size="small">
                    <el-input v-model="form.stime" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理人" :label-width="formLabelWidth" size="small">
                    <el-input v-model="form.sname" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理人电话" :label-width="formLabelWidth" size="small">
                    <el-input v-model="form.sphone" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处理详情" :label-width="formLabelWidth" size="small">
                    <el-input v-model="form.sdetail" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="检查情况" :label-width="formLabelWidth" prop="scheck" size="small">
                    <template>
                        <el-select v-model="form.scheck" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>

                </el-form-item>
                <el-form-item label="服务评价" :label-width="formLabelWidth" prop="sevaluate" size="small">
                    <el-rate
                            v-model="form.sevaluate"
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                    </el-rate>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
            </div>

        </el-dialog>

    </div>

</template>

<script>
	import {checkEvaluate} from "../plugins/validator";

	export default {

		data() {
			return {
				options: [{
					value: '0',
					label: '验收通过'
				}, {
					value: '1',
					label: '异常'
				}],
				options1: [{
					value1: '0',
					label1: '家电维修'
				}, {
					value1: '1',
					label1: '代送快递'
				},{
					value1: '2',
					label1: '房屋装修'
				},{
					value1: '3',
					label1: '家居清理'
				},{
					value1: '4',
					label1: '提醒服务'
				},{
					value1: '5',
					label1: '水电维修'
				},{
					value1: '6',
					label1: '其他'
				}],

                mark:0,
				dialogTableVisible: false,
				value:null,
				dialogVisible:false,
				dialogFormVisible:false,
				total:null,
				total1:null,
				total2:null,
				total3:null,
				tableData: null,
				tableData1:null,
				tableData2:null,
				tableData3:null,
				pageForm: {
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				pageForm1: {
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				pageForm2: {
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				pageForm3: {
					number:1,
					pagenum: 1,
					pagesize: 5
				},
				activeName: 'first',
				form:{
					sid:'',
                    serviceType:'',
                    requireDetail:'',
                    stime:'',
					sname:'',
					sphone:'',
					sdetail: '',
                    scheck:'',
                    sevaluate:'',
					sstatus:''
				},
				gridForm: {
					sname:'',
					sphone:'',
					sdetail: '',
				},
				rules: {
					scheck: [
						{ required: true, message: '请选择活动区域', trigger: 'change' }
					],
					sevaluate: [
						{ validator:checkEvaluate,trigger: 'change' },
					]
				},
				formInline: {
					serviceType: ''
				},
				formLabelWidth: '120px'
			};

		},
		methods: {
			async getServiceList() {
				const {data: resp} = await this.$http.get('/servicesTable/findByID' )
				if (resp.code !== 200) {
					return this.$message.error('获取用户列表失败！')
				}
				// this.$message.success('登录成功')

				this.pageForm.number=1
				this.tableData = resp.data
				this.total = resp.data.length

			},

            //根据类别查询
			async getServiceListByType() {

				if(this.formInline.serviceType===null){
					this.getServiceList()
				}else {
					const {data: resp} = await this.$http.get('/servicesTable/findByIDFrom/' + this.formInline.serviceType)
					if (resp.code !== 200) {
						return this.$message.error('获取用户列表失败！')
					}
				console.log(resp)
					if (this.pageForm.pagenum != 1 && this.mark === 0) {
						this.pageForm.pagenum = 1
						this.pageForm.number = this.pageForm.pagenum
						this.mark = 1
					}
					if (this.mark === 1) {
						this.pageForm.number = this.pageForm.pagenum
					}

					this.tableData = resp.data
					this.total = resp.data.length
					this.formInline.serviceType=null
				}
			},

            //根据状态查询
			async getServiceListByStatus(val) {

				const {data: resp} = await this.$http.get('/servicesTable/findByIDStatus/'+val)
				if (resp.code !== 200) {
					return this.$message.error('获取用户列表失败！')
				}
				if(this.pageForm.pagenum!=1 && this.mark===0)
				{
					this.pageForm.pagenum=1
					this.pageForm.number=this.pageForm.pagenum
					this.mark=1
				}
				this.pageForm.number=this.pageForm.pagenum

				if(val===0){
					this.tableData2 = resp.data
					this.total2 = resp.data.length
				}
				if(val===1){
					this.tableData1 = resp.data
					this.total1 = resp.data.length
				}
				if(val===2){
					this.tableData3 = resp.data
					this.total3 = resp.data.length
				}

			},

			handleSizeChange(newSize) {
				// console.log(newSize)
				this.pageForm.pagenum = 1
				this.pageForm.pagesize = newSize
				if(this.formInline.serviceType===""){
					this.getServiceList()
				}else{
					this.getServiceListByType()
				}
			},
			// 监听 页码值 改变事件
			handleCurrentChange(newSize) {
				this.pageForm.pagenum = newSize
				if(this.formInline.serviceType===""){
					this.getServiceList()
				}else{
					this.getServiceListByType()
				}
			},

			handleSizeChange1(newSize) {
				// console.log(newSize)
				this.pageForm1.pagenum = 1
				this.pageForm1.pagesize = newSize
				// if(this.formInline.serviceType===""){
				// 	this.getServiceListByStatus(1)
				// }else{
				// 	this.getServiceListByType()
				// }
			},
			// 监听 页码值 改变事件
			handleCurrentChange1(newSize) {
				this.pageForm1.number = newSize
				// if(this.formInline.repairType===""){
				// 	this.getServiceListByStatus(1)
				// }else{
				// 	this.getServiceListByType()
				// }
			},

			handleSizeChange2(newSize) {
				// console.log(newSize)
				this.pageForm2.number = 1
				this.pageForm2.pagesize = newSize
				// if(this.formInline.serviceType===""){
				// 	this.getServiceListByStatus(0)
				// }else{
				// 	this.getServiceListByType()
				// }
			},
			// 监听 页码值 改变事件
			handleCurrentChange2(newSize) {
				this.pageForm2.number = newSize
				// if(this.formInline.repairType===""){
				// 	this.getServiceListByStatus(0)
				// }else{
				// 	this.getServiceListByType()
				// }
			},

			handleSizeChange3(newSize) {
				// console.log(newSize)
				this.pageForm3.pagenum = 1
				this.pageForm3.pagesize = newSize
				// if(this.formInline.serviceType===""){
				// 	this.getServiceListByStatus(2)
				// }else{
				// 	this.getServiceListByType()
				// }
			},
			// 监听 页码值 改变事件
			handleCurrentChange3(newSize) {
				this.pageForm3.number = newSize
				// this.getServiceListByStatus(2)

			},

            //删除记录
			async deleteService(row) {
				const confirmResult = await this.$confirm(
					'此操作将永久删除该记录, 是否继续?',
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).catch(err => err)
				// 点击确定 返回值为：confirm
				// 点击取消 返回值为： cancel
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				const {data: resp} = await this.$http.delete('/servicesTable/deleteServicesTableById/'+row.sid)
				this.getServiceList()
				this.getServiceListByStatus(0)
				this.getServiceListByStatus(1)
				this.getServiceListByStatus(2)

				// })
			},

            //提交表单
			submitForm(formName) {
				this.form.sstatus=2
				console.log(this.form)
				this.$refs[formName].validate(async valid => {
					if (valid) {
						const {data: resp} = await this.$http.put('/servicesTable/updateServicesTable',this.form)
						this.getServiceList()
						this.getServiceListByStatus(0)
						this.getServiceListByStatus(1)
						this.getServiceListByStatus(2)
						this.dialogFormVisible=false

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			detail:function(index,row){
				this.dialogVisible=true;
				this.gridForm=Object.assign({},row);
			},
			evaluate:function(index,row){
				this.dialogFormVisible=true;
				this.form=Object.assign({},row);
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			handleClick(tab, event) {
				console.log(tab, event);
			}
		},
		created() {
			this.getServiceList()
			this.getServiceListByStatus(0)
			this.getServiceListByStatus(1)
			this.getServiceListByStatus(2)
		},

	};
</script>

<style scoped>
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        right: 100px;
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

